<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      //扩展案例：关于异步执行的顺序
      async function async1() { //内有异步
        console.log('async1 start'); //2 同步
        // 执行async2函数的 setTimeout
        await async2(); // 需等待
        // 第三个执行的宏任务 
        setTimeout(function () { //异步
          // 等上面执行完在执行
          console.log('setTimeout1'); //8
        }, 0);
      }

      async function async2() {
        // 第二个执行的宏任务 
        setTimeout(function () {
          console.log('setTimeout2'); //7
          // 如果这里面还有微任务会在8之前把所有的微任务完成之后再去执行8
        }, 0);
      }
      console.log('script start'); //1    //执行同步代码

      // 第一个执行的宏任务 
      setTimeout(function () {
        // 最后执行setTimeout
        console.log('setTimeout3'); //6
      }, 0);

      async1(); //调用
      //执行先执行同步 输出2

      // 调用
      // 执行异步setTimeout
      new Promise(function (resolve, reject) {
        console.log('Promise1'); //3  //同步按照代码顺序
        resolve();
      }).then(function () {
        // 等主线任务完成在执行
        console.log('Promise2'); //5 注意是微任务
      });
      console.log('script end'); //4
    </script>
  </body>
</html>
